<template>
	<div>
		<!--  弹窗  -->
		<el-dialog :visible.sync="dialogUser" width="60%" :before-close="handleClose">
			<el-form ref="form" :model="form" :visible.sync="dialogUser" :rules="rules">
				<el-form-item label="用户id" prop="id" :rules="[{ required: true, message: '请输入用户id' }]">
					<el-input placeholder="请输入用户id" v-model="form.id"></el-input>
				</el-form-item>
				<el-form-item label="用户名" prop="name" :rules="[{ required: true, message: '请输入用户名' }]">
					<el-input placeholder="请输入用户名" v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item label="用户状态" prop="state" :rules="[{ required: true, message: '请输入用户状态' }]">
					<el-input placeholder="请输入用户状态" v-model="form.state"></el-input>
				</el-form-item>
				<el-form-item label="身份证号" prop="idCard" :rules="[{ required: true, message: '请输入身份证号' }]">
					<el-input placeholder="请输入身份证号" v-model="form.idCard"></el-input>
				</el-form-item>
				<el-form-item label="手机号" prop="phone" :rules="[{ required: true, message: '请输入手机号' }]">
					<el-input placeholder="请输入手机号" v-model="form.phone"></el-input>
				</el-form-item>
				<el-form-item label="会员状态" prop="vip" :rules="[{ required: true, message: '请输入会员状态' }]">
					<el-input placeholder="请输入会员状态" v-model="form.vip"></el-input>
				</el-form-item>
				<el-form-item label="账户余额" prop="userMoney" :rules="[{ required: true, message: '请输入账户余额' }]">
					<el-input placeholder="请输入账户余额" v-model="form.userMoney"></el-input>
				</el-form-item>
				<el-form-item label="头像" prop="headPhoto" :rules="[{ required: true, message: '请输入用户头像' }]">
				
				<el-input placeholder="请上传用户头像" v-model="form.headPhoto"></el-input>
					<el-upload class="avatar-uploader"
						action="/api/uploadImages?Content-Type=multipart/form-data" 
						:on-success="(res,file)=>handleAvatarSuccess(res,file)"
						list-type="picture"
						 >
						<el-button size="small" type="primary">点击上传</el-button>
						
						<!-- <img v-if="form.headPhoto" :src="form.headPhoto" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
						<!-- <el-image v-if="scope.row.imageUrl" :src="scope.row.imageUrl" style="width: 50px; height: 50px;"></el-image> -->
					</el-upload>
				</el-form-item>
				<!-- <input type="file" :id="form.id" @change="doUpload" placeholder="点我上传" multiple />
				      <img :src="item" alt="" v-for="(item, index) in urlList" /> -->
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button>取 消</el-button>
				<el-button type="primary" @click="identify">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import axios from 'axios';
import LoginVue from '../Login/Login.vue';
	export default {
		props: ["dialogUser","forms"],
		data() {
			return {
				form: {
					id: "",
					name: "",
					state: '',
					idCard: "",
					phone: "",
					vip: '',
					userMoney: "",
					headPhoto: "",
				},
				rules: {
					id: [{
						required: true,
						message: "请输入用户id"
					}],
					name: [{
						required: true,
						message: "请输入用户名"
					}],
					state: [{
						required: true,
						message: "请输入用户状态"

					}],
					idCard: [{
						required: true,
						message: "请输入身份证号"
					}],
					phone: [{
						required: true,
						message: "请输入手机号"
					}],
					vip: [{
						required: true,
						message: "请输入会员状态"
					}],
					userMoney: [{
						required: true,
						message: "请输入账户余额"
					}],
					headPhoto: [{
						required: true,
						message: "请上传头像"
					}]
				},
			}
		},
	
		methods: {
			handleAvatarSuccess(res,file) {
				this.form.headPhoto = file.response;
				console.log(res,file)
				console.log(this.form.headPhoto)
			
			},
			handleClose() {
				this.$parent.dialogUser = false
			},
			doUpload(event){
				//上传
			},
			//添加
			identify() {
				axios.post("/insertUser", this.form, {
					headers: {
						'Content-Type': 'application/json'
					}
				}).then((res) => {
					console.log(res)
					if (res.data === "用户添加成功") {
						this.tableData = res.data;
						this.dialogUser = false;
						alert("用户添加成功");
					}
				});
			},
		}
	}
</script>

<style>
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
</style>
